import { lazy, Suspense } from "react";
import { createBrowserRouter } from "react-router-dom";
import {
  CollectionIcon,
  CreateDesignIcon,
  DesignIcon,
  HomeIcon,
  TemplateCenterIcon,
} from "../components/icons";
import SvgIcon from "../components/SvgIcon";


const Home = lazy(() => import("../pages/home/Home"));
const About = lazy(() => import("../pages/about/About"));
const  Box = lazy(() => import("../pages/box/Box"));
const UserLayout = lazy(() => import("../pages/design/DesignLayout"));
const DesignHome = lazy(() => import("../pages/design/designHome/Home"));
const MyDesign = lazy(() => import("../pages/design/myDesign/MyDesign"));
const CanvasPage = lazy(() => import('../pages/CanvasPage/CanvasPage'))
const MyCollection = lazy(
  () => import("../pages/design/myCollection/MyCollection")
);
const CreateDesign = lazy(
  () => import("../pages/design/createDesign/CanvasSizeSelector")
);
const TemplateCenter = lazy(
  () => import("../pages/design/templateCenter/TemplateCenter")
);
const Workbench = lazy(() => import("../pages/design/workbenches/Workbenches"));
const WebSocket = lazy(() => import("../pages/websocket/WebSocket"));
// 一个组件路由的引进
import FreAsked from '../components/questions/FreAsked'

const Menu = lazy(() => import("../pages/Menu/Menu"));
// 专题页面的
const ThemePage = lazy(() => import('../pages/ThemePage/ThemePage'))
const Look=lazy(()=>import('../components/lookPage/Look'))
const Teacher=lazy(()=>import('../components/bigdata/Teacher'))
const Marketing=lazy(()=>import('../components/bigdata/Marketing'))
const Nav = lazy(()=>import('../pages/nav/Nav'))
// 抠图
const CutImage = lazy(()=>import('../pages/removalApp/RemovApp'))
// 创建加载中组件
// 由于找不到 @/components/Loading 模块，尝试使用相对路径引入
import Loading from "../components/Loading";

const LoadingComponent = () => <Loading />;

export const designRoutes = [
  {
    path: "designHome",
    element: (
      <Suspense fallback={<LoadingComponent />}>
        <DesignHome />
      </Suspense>
    ),
    icon: <SvgIcon component={HomeIcon} />,
    label: "首页推荐",
  },
  {
    path: "myDesign",
    element: (
      <Suspense fallback={<LoadingComponent />}>
        <MyDesign />
      </Suspense>
    ),
    icon: <SvgIcon component={DesignIcon} />,
    label: "我的设计",
  },
  {
    path: "myCollection",
    element: (
      <Suspense fallback={<LoadingComponent />}>
        <MyCollection />
      </Suspense>
    ),
    icon: <SvgIcon component={CollectionIcon} />,
    label: "我的收藏",
  },
  {
    path: "workbench",
    element: (
      <Suspense fallback={<LoadingComponent />}>
        <Workbench />
      </Suspense>
    ),
    icon: <SvgIcon component={CreateDesignIcon} />,
    label: "工作台",
  },
  {
    path: "createDesign",
    element: (
      <Suspense fallback={<LoadingComponent />}>
        <CreateDesign />
      </Suspense>
    ),
    icon: <SvgIcon component={CreateDesignIcon} />,
    label: "创建设计",
  },
  {
    path: "templateCenter",
    element: (
      <Suspense fallback={<LoadingComponent />}>
        <TemplateCenter />
      </Suspense>
    ),
    icon: <SvgIcon component={TemplateCenterIcon} />,
    label: "模版中心",
  },
];

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <Suspense fallback={<LoadingComponent />}>
        <Home />
      </Suspense>
    ),
  },
  {
    path: "/about",
    element: (
      <Suspense fallback={<LoadingComponent />}>
        <About />
      </Suspense>
    ),
  },
  // 问题组件
  {
    path: "/freasked",
    element: (
      <Suspense fallback={<LoadingComponent />}>
        <FreAsked />
      </Suspense>
    ),
  },
  {
    path: "/Look",
    element: (
      <Suspense fallback={<LoadingComponent />}>
        <Look/>
      </Suspense>
    ),
  },
   {
    path: "/teacher",
    element: (
      <Suspense fallback={<LoadingComponent />}>
        <Teacher/>
      </Suspense>
    ),
  },
 {
    path: "/marketing",
    element: (
      <Suspense fallback={<LoadingComponent />}>
        <Marketing/>
      </Suspense>
    ),
  },
//  CutImage
 {
    path: "/CutImage",
    element: (
      <Suspense fallback={<LoadingComponent />}>
        <CutImage/>
      </Suspense>
    ),
  },
  {
    path: "/box",
    element: (
      <Suspense fallback={<LoadingComponent />}>
        <Box />
      </Suspense>
    ),
  },
  {
    path: '/themepage',
    element: (
      <Suspense fallback={<LoadingComponent />}>
        <ThemePage />
      </Suspense>
    )
  },
  {
    path: '/CanvasPage',
    element: (
      <Suspense fallback={<LoadingComponent />}>
        <CanvasPage />
      </Suspense>
    )
  },
  {
    path: '/nav',
    element: (
      <Suspense fallback={<LoadingComponent />}>
        <Nav />
      </Suspense>
    )
  },
  {
    path: "/socket",
    element: (
      <Suspense fallback={<LoadingComponent />}>
        <WebSocket />
      </Suspense>
    ),
  },
  {
    path: "/menu",
    element: (
      <Suspense fallback={<LoadingComponent />}>
        <Menu />
      </Suspense>
    ),
  },
  {
    path: "/design",
    element: (
      <Suspense fallback={<LoadingComponent />}>
        <UserLayout />
      </Suspense>
    ),
    children: designRoutes,
  },
]);

export default router;